<!-- 设备管理-设备档案管理-设备备件清单页面 -->
<template>
  <div>
    <div v-show="isMain" class="equip-wrap-common">
      <px-form class="custom-form-ui equip-form" :model="queryParams" label-position="right" label-width="120px">
        <px-row :gutter="16">
          <px-col :span="6">
            <px-form-item label="备件清单名称">
              <px-input
                v-model="queryParams.inventoryName"
                placeholder="请输入备件清单名称"
                maxlength="50"
                clearable
                @blur="queryParams.inventoryName = $event.target.value.trim()"
                @keyup.enter="queryTable"
              >
                <template #suffix>
                  <px-icon style="cursor: pointer" @click="queryTable">
                    <search />
                  </px-icon>
                </template>
              </px-input>
            </px-form-item>
          </px-col>
          <px-col :span="6">
            <EquipClassSelect :className="queryParams.className" @changeClassName="changeClassName" />
          </px-col>
          <px-col :span="6">
            <EquipCategorySelect :className="queryParams.className" :categoryId="queryParams.categoryId" @changeCategory="changeCategory" />
          </px-col>
          <px-col :span="6">
            <EquipTypeSelect
              :className="queryParams.className"
              :categoryId="queryParams.categoryId"
              :typeId="queryParams.typeId"
              @changeType="changeType"
            />
          </px-col>
          <px-col :span="6">
            <EquipModelSelect
              :className="queryParams.className"
              :categoryId="queryParams.categoryId"
              :typeId="queryParams.typeId"
              :modelId="queryParams.modelId"
              @changeModel="changeModel"
            />
          </px-col>
          <px-col :span="6">
            <px-form-item label="设备名称/编号">
              <px-input
                v-model="queryParams.eqpIdOrName"
                placeholder="请输入设备名称/编号"
                maxlength="50"
                clearable
                @blur="queryParams.value = $event.target.value.trim()"
                @keyup.enter="queryTable"
              >
                <template #suffix>
                  <px-icon style="cursor: pointer" @click="queryTable">
                    <search />
                  </px-icon>
                </template>
              </px-input>
            </px-form-item>
          </px-col>
          <px-col :span="6">
            <px-button type="primary" @click="queryTable">查询</px-button>
            <px-button @click="resetTable">重置</px-button>
          </px-col>
        </px-row>
      </px-form>
      <div class="equip-table-btn">
        <px-button v-has="'ALL_EQUIP_ARCHIVE_SPAREPARTS_ADD'" type="primary" @click="handleAdd">新增备件清单</px-button>
      </div>
      <px-table :data="tableData" class="equip-table" height="calc(100vh - 346px)" border>
        <px-table-column label="序号" width="80" align="center" fixed="left">
          <template #default="{ $index }">
            {{ (queryParams.pageNum - 1) * queryParams.pageSize + $index + 1 }}
          </template>
        </px-table-column>
        <px-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :label="item.label"
          :min-width="item.minWidth"
          :align="item.align"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :fixed="item.fixed"
        >
          <template #default="scope">
            <px-button v-if="item.eqpNum" link type="primary" @click="handleNumber(scope.row)">
              {{ scope.row.eqpNum }}
            </px-button>
            <px-button v-else-if="item.sparePartTypeNum" link type="primary" @click="handleType(scope.row)">
              {{ scope.row.sparePartTypeNum }}
            </px-button>
            <span v-else>{{ scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-" }}</span>
          </template>
        </px-table-column>
        <px-table-column label="操作" width="150" fixed="right" align="center">
          <template #default="scope">
            <px-tooltip content="详情" placement="top">
              <px-button v-has="'ALL_EQUIP_ARCHIVE_SPAREPARTS_VIEW'" link icon="Tickets" type="primary" @click="handleView(scope.row)" />
            </px-tooltip>
            <px-tooltip content="编辑" placement="top">
              <px-button v-has="'ALL_EQUIP_ARCHIVE_SPAREPARTS_EDIT'" link icon="EditPen" type="primary" @click="handleEdit(scope.row)" />
            </px-tooltip>
            <px-tooltip content="删除" placement="top">
              <px-button v-has="'ALL_EQUIP_ARCHIVE_SPAREPARTS_DELETE'" link icon="Delete" type="danger" @click="handleDelete(scope.row)" />
            </px-tooltip>
          </template>
        </px-table-column>
      </px-table>
      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        class="equip-table-pagination"
        :total="total"
        @pagination="queryTable"
      />
    </div>
    <!-- 详情新增/编辑页面 -->
    <AddDetail :id="id" :isMain="isMain" :isView="isView" :drawerType="drawerType" @backMainPage="backMainPage" @queryTable="queryTable" />
    <!-- 详情查看页面 -->
    <ViewDetail :id="id" :isMain="isMain" :isView="isView" @backMainPage="backMainPage" />
    <!-- 设备数量弹窗 -->
    <NumDialog :id="id" :dialogVisible="numDialogVisible" @closeDialog="numDialogVisible = false" />
    <!-- 关联备件弹窗 -->
    <TypeDialog :id="id" :dialogVisible="typeDialogVisible" @closeDialog="typeDialogVisible = false" />
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "ALL_EQUIP_ARCHIVE_SPAREPARTS"
});
import { deleteSpareParts, querySpareParts } from "@/api/equip/archive";
import EquipCategorySelect from "@/views/all/equip/components/EquipCategorySelect.vue";
import EquipClassSelect from "@/views/all/equip/components/EquipClassSelect.vue";
import EquipModelSelect from "@/views/all/equip/components/EquipModelSelect.vue";
import EquipTypeSelect from "@/views/all/equip/components/EquipTypeSelect.vue";
import { PxMessage, PxMessageBox } from "px-ui";
import { onMounted, reactive, toRefs } from "vue";
import AddDetail from "./components/AddDetail.vue";
import NumDialog from "./components/NumDialog.vue";
import TypeDialog from "./components/TypeDialog.vue";
import ViewDetail from "./components/ViewDetail.vue";

const state = reactive<any>({
  isMain: true, // 主页面true 详情页面false
  isView: true, // 查看true 新增/编辑false
  queryParams: {
    pageNum: 1,
    pageSize: 20
  },
  tableColumns: [
    { prop: "inventoryName", label: "备件清单名称", minWidth: "360", showOverflowTooltip: true, fixed: "left" },
    { prop: "categoryName", label: "设备总称", minWidth: "160", showOverflowTooltip: true },
    { prop: "typeName", label: "设备类型", minWidth: "160", showOverflowTooltip: true },
    { prop: "modelName", label: "设备型号", minWidth: "200", showOverflowTooltip: true },
    { prop: "classNameDesc", label: "科室", minWidth: "100", showOverflowTooltip: true },
    { prop: "eqpNum", label: "设备数量", minWidth: "100", showOverflowTooltip: true, eqpNum: true },
    { prop: "sparePartTypeNum", label: "关联备件", minWidth: "100", showOverflowTooltip: true, sparePartTypeNum: true }
  ],
  tableData: [],
  total: 0,
  id: "",
  drawerType: "add", // 弹窗默认新增
  numDialogVisible: false, // 设备数量弹窗显示隐藏
  typeDialogVisible: false // 关联备件弹窗显示隐藏
});
const { isMain, isView, queryParams, tableColumns, tableData, total, drawerType, id, numDialogVisible, typeDialogVisible } = toRefs(state);

// 进入页面时触发
onMounted(() => {
  queryTable();
});
// 查询备件列表
const queryTable = async () => {
  const params = JSON.parse(JSON.stringify(queryParams.value));
  const res = await querySpareParts(params);
  tableData.value = res?.data || [];
  total.value = res?.total;
};
// 重置筛选条件和备件列表
const resetTable = async () => {
  queryParams.value = {
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize
  };
  queryTable();
};
// 查看详情
const handleView = (row: any) => {
  id.value = row.id;
  isMain.value = false;
  isView.value = true;
};
// 新增备件清单
const handleAdd = () => {
  drawerType.value = "add";
  isMain.value = false;
  isView.value = false;
};
// 编辑详情
const handleEdit = (row: any) => {
  drawerType.value = "edit";
  id.value = row.id;
  isMain.value = false;
  isView.value = false;
};
// 设备数量
const handleNumber = (row: any) => {
  id.value = row.id;
  numDialogVisible.value = true;
};
// 关联备件
const handleType = (row: any) => {
  id.value = row.id;
  typeDialogVisible.value = true;
};
// 删除运行记录
const handleDelete = async (row: any) => {
  PxMessageBox.confirm("要删除当前备件清单吗？", "提示", {
    confirmButtonText: "删除",
    confirmButtonClass: "px-button--danger",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      await deleteSpareParts(row.id);
      PxMessage.success("删除成功");
      queryTable();
    })
    .catch(() => {});
};
// 从新增/编辑、详情返回主页面
const backMainPage = () => {
  isMain.value = true;
};

// 外部封装好的组件
// 科室组件调用父组件
const changeClassName = val => {
  queryParams.value.className = val;
  queryParams.value.categoryId = null;
  queryParams.value.typeId = null;
  queryParams.value.modelId = null;
};
// 改变设备总称，清空设备类型和设备型号
const changeCategory = val => {
  queryParams.value.categoryId = val;
  queryParams.value.typeId = null;
  queryParams.value.modelId = null;
};
// 改变设备类型，清空设备型号
const changeType = (val, val2) => {
  queryParams.value.categoryId = val2;
  queryParams.value.typeId = val;
  queryParams.value.modelId = null;
};
// 改变设备型号
const changeModel = (val, val2, val3) => {
  queryParams.value.categoryId = val2;
  queryParams.value.typeId = val3;
  queryParams.value.modelId = val;
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/table-list.scss");
</style>
